<div class="row margin-0">
	<div class="col-md-12 col-sm-12 col-xs-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">列表</h3>
			</div>
			<div class="panel-body list-container">
				<table class="my-list" data-page="15" data-count="999" data-page-size="30">
					<tr class="title-row">
						<th width="100">标题1</th>
						<th width="100">标题2</th>
						<th>标题3</th>
					</tr>
					<tr class="checked">
						<td width="100">a1</td>
						<td width="200">b1</td>
						<td>c1</td>
					</tr>
					<tr class="">
						<td rowspan="2">a2</td>
						<td colspan="2">b2</td>
					</tr>
					<tr class="checked">
						<td>b3</td>
						<td>c3</td>
					</tr>
					<tr class="checked">
						<td colspan="2">a4</td>
						<td rowspan="2">b4</td>
					</tr>
					<tr class="">
						<td>a5</td>
						<td>b5</td>
					</tr>
					<tr class="">
						<td>a6</td>
						<td>b6</td>
						<td>c6</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	<div class="col-md-12 col-sm-12 col-xs-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">
					列表数据
					<div class="btn btn-xs btn-danger pull-right redo">重绘</div>
				</h3>
			</div>
			<div class="panel-body list-data padding-0" contenteditable="true" style="height: 550px; overflow: auto;">
				<pre class="margin-0" style="border: none;">
	{
		header : true,
		footer : true,
		search : true,
		checkbox : true,
		title : undefined,
		searchDefaultText : '输入查询关键字',
		searchFieldName : 'search',
		pageFieldName : 'page',
		pageSizeFieldName : 'pageSize',
		paginate : function(page, pageSize, key) {
			alert('page: ' + page + ' -- pageSize: ' + pageSize + ' -- searchKey: ' + key);
		},
		btns : [ {
			text : '按钮1',
			icon : 'icon-user',
			style : 'btn-default',
			click : function(page, pageSize, key) {
				alert('this is button 1');
			}
		}, {
			text : '按钮组2',
			icon : 'icon-key',
			style : 'btn-primary',
			click : function(page, pageSize, key) {
				alert('this is button 2.');
			},
			children : [ {
				text : '子按钮1',
				icon : 'icon-user',
				click : function(page, pageSize, key) {
					alert('this is a child button 1');
				}
			}, {
				split : true
			}, {
				text : '子按钮2',
				//icon : 'icon-key',
				click : function(page, pageSize, key) {
					alert('this is a child button 2');
				}
			} ]
		}, {
			text : '按钮3',
			style : 'btn-danger',
			click : function(page, pageSize, key) {
				alert('this is button 3.');
			}
		} ]
	}
				</pre>
			</div>
		</div>
	</div>
</div>
<script src="${request.contextPath}/js/suredy-list.js"></script>
<script type="text/javascript">
	$(function() {
		var table = $('.list-container').html();

		$('div.btn.redo').on('click', function() {
			$('.list-container').html(table);

			var data = eval('(' + $('.list-data pre').html() + ')');

			$('.my-list').list(data);
			
			console.log($.suredy.list.checked($('.my-list')));
		});

		$('div.btn.redo').trigger('click');
	});
</script>